<template>
        <div class='recommend'>
            <h3>推荐饭店</h3>
            <div class="cont">
                <ul>
                    <li v-for="(food,index) in foods" :key="index">
                        <div class='pic'>
                            <img :src="food.img" alt="">
                        </div>
                    </li>
                </ul>
                <div class="list-name">
                    <span class='food-name' v-for="(name,index) in foodName" :key="index">{{name.name}}</span>
                </div>
            </div>
        </div>
</template>
<script>
export default {
    name:'Recommend',
    data() {
        return {
            foods:[
                {img:require('../../assets/ld/img/food2.jpg')},
                {img:require('../../assets/ld/img/food2.jpg')},
                {img:require('../../assets/ld/img/food2.jpg')},
                {img:require('../../assets/ld/img/food2.jpg')},
                {img:require('../../assets/ld/img/food2.jpg')},
                {img:require('../../assets/ld/img/food2.jpg')}
            ],
            foodName:[
                {name:'老鱿鱼'},
                {name:'五花肉'},
                {name:'虾饺'},
                {name:'冷饮'},
                {name:'乌鸡汤'},
                {name:'水果饮料'},
                {name:'葡萄酒'},
                {name:'冰糖雪梨'},
                {name:'鸡蛋糕'},
                {name:'炒鸡'},
                {name:'酸梅汤'},
                {name:'炒花甲'},
                {name:'麻酱鸡'},
                {name:'拼盘'},
                {name:'海鲜'},
                {name:'炒鱿鱼'},
                {name:'炒鸡'},
                {name:'果汁'},

            ]
        }
    },
}
</script>
<style lang="less">
        .recommend{
            padding-top: 40px ;
            width: 80%;
            margin: 5px 36px;
            h3{
                color: black;
                font-size: 20px;
                line-height: 26px;
                margin-bottom: 8px;
            }
            .cont{
                border: 1px solid #e5e5e5;
                background-color: #fff;
                padding: 33px 32px 26px 32px;
                border-radius: 4px;
                ul{   
                    list-style: none;
                    display: flex;
                    li{
                        width: 130px;
                        margin-right: 20px;
                        .pic{
                            position: relative;
                            height: 130px;
                            border-radius: 4px;
                            img{
                                width: 100%;
                                height: 100%;
                                border-radius: 4px;
                            }
                        }
                    }
                }
                .list-name{
                    padding: 25px 0 0 6px;
                    height: 100px;
                    span{
                        display: block;
                        float: left;
                        margin: 0 20px 19px 0;
                        font-size: 14px;
                        line-height: 20px;
                        color: #333;
                    }
                }
            }
        }
    
</style>